<template>
  <div class="app-container">

    <el-card>
      <el-form :inline="true" :model="teacherForm" size="small" ref="teacherFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="教师名称" prop="name">
          <el-input v-model="teacherForm.name"></el-input>
        </el-form-item>
        <el-form-item label="教师级别" prop="level">
          <el-select v-model="teacherForm.level" placeholder="请选择教师级别">
            <el-option label="请选择教师级别" :value="0"></el-option>
            <el-option label="高级讲师" :value="1"></el-option>
            <el-option label="首席讲师" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入驻时间">
          <el-col :span="11">
            <el-form-item prop="joinDateStart">
              <el-date-picker type="date" placeholder="选择日期" v-model="teacherForm.joinDateStart" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="joinDateEnd">
              <el-date-picker placeholder="选择日期" v-model="teacherForm.joinDateEnd" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectTeacher">查询</el-button>
          <el-button type="primary" @click="resetTeacherForm">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="teacherListData"
        stripe
        style="width: 100%" border>
        <el-table-column
          type="index"
          label="#"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="level"
          label="职位">
          <template slot-scope="{row}">
            <el-tag v-if="row.level == 1" type="success">高级讲师</el-tag>
            <el-tag v-if="row.level == 2" type="success">首席讲师</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="intro"
          label="简介">
        </el-table-column>
        <el-table-column
          prop="joinDate"
          label="加入时间">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="{row}">
            <el-button size="mini" type="primary" @click="toUpdate(row)">更新</el-button>
            <el-button size="mini" type="warning" @click="deleteTeacher(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
        :current-page="this.teacherCondition.page"
        :page-sizes="this.pageSizes"
        :page-size="this.teacherCondition.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.teacherCondition.total">
      </el-pagination>
    </el-card>

  </div>
</template>

<script>

  import * as TeacherApi from "../../api/teacher"


  export default {
    name: 'TeacherList',
    data:function() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        teacherListData:[]
        ,
        teacherCondition:{

          page: 1,
          size: 5,
          total: 0,
        },
        pageSizes:[5,10],
        teacherForm:{
          name:'',
          level: 0,
          joinDateStart: '',
          joinDateEnd: ''
        }
      }
    },
    created:function(){

      this.loadTeacherListData();
    },
    methods:{

      async loadTeacherListData(){


        let {list,total} = await TeacherApi.teacherList(this.teacherCondition.page,this.teacherCondition.size,this.getCondition());
        this.teacherListData = list;
        this.teacherCondition.total = total;

      },
      pageSizeChange(size){

        this.teacherCondition.size = size;
        this.loadTeacherListData();
      },
      currentPageChange(page){

        this.teacherCondition.page = page;

        this.loadTeacherListData();
      },
      selectTeacher(){

       this.teacherCondition.page = 1;
       this.loadTeacherListData();

      },
      resetTeacherForm(){

        this.$refs["teacherFormRef"].resetFields();
        this.loadTeacherListData();

      },
      getCondition(){

        let condition = {};

        for (let teacherFormKey in this.teacherForm) {

          let value =this.teacherForm[teacherFormKey];

          if (value != null && value != undefined && value != ''){

            if (value instanceof Number && value != 0){

              condition[teacherFormKey] = value;
            }else {

              condition[teacherFormKey] = value;
            }
          }
        }

        return condition;
      },
      toUpdate(data){

        // console.log(data)
        console.log('/teacher/manager/' + data.id)
        this.$router.push({
          path: '/teacher/manager/'+ data.id
          // params: {'id': data.id}
        })
      },
      deleteTeacher(row){


        this.$confirm(`是否删除${row.name}`, '删除用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {

           await TeacherApi.deleteTeacher(row.id);

            this.$message({
              type: 'success',
              message: '删除成功!'
            });

            this.loadTeacherListData();

        }).catch(() => {



        });

      }
    }
  }
</script>

<style scoped>

  .el-pagination{

    margin: 20px 0px;
    float: right;
  }
</style>
